.rider_index_content
    height: 100vh
    background-color: #f8f8f8
    .status_bar
        background-color: #1a1a1a
    .opacityBtn
        background-color: rgba(255,255,255,0.1)
    .rider_head_cont
        padding: 10px 20px 0 20px
        box-sizing: border-box
        .top_header
            display: flex
            align-items: center
            justify-content: space-between
            .user_status_box
                border-radius: 30px
                margin-left: 15px
                padding: 0 15px
                display: flex
                align-items: center
            .rider_notify_box
                margin-left: 15px
    .btnBox
        border-radius: 50%
        width: 35px
        height: 35px
        display: flex
        align-items: center
        justify-content: center
    .rider_header
        background-color: #1a1a1a
        .tabList
            margin-top: 15px
            display: flex
            .tabItem
                display: flex
                align-items: center
                color: #b6b6b6
                justify-content: center;
                font-size: 14px
                flex: 1
                white-space: nowrap
                // margin-right: 60rpx
                &:last-child
                    margin-right: 0
                &.turnTabItem
                    flex: 0.9
                .rider_notify_count
                    position: absolute
                    right: -17px
                    top: -10px
                    margin-left: 3px
                    color: inherit
                .item
                    position: relative
                    padding-bottom: 10px
                    .name
                        display: flex
                        align-items: center
                        .tabIcon
                            margin-right: 8rpx
                        .rider_notify_text_count
                            margin-left: 8rpx
                    &.active
                        color: #fff
                        transition: all 0.3s
                        &:after
                            content: ''
                            display: block
                            overflow: hidden
                            position: absolute
                            bottom: 0
                            height: 4px
                            background-color: #fff
                            border-radius: 2px
                            width: 100%
    .rider_content
        padding: 10px
        box-sizing: border-box
        padding-bottom: calc(45px + 10px + env(safe-area-inset-bottom))
        .order_list
            display: flex
            .order_item
                width 100%
    .fixed_bottom_help
        position: fixed
        bottom: 0
        z-index 10
        width: 100%
        padding: 10px
        padding-bottom: env(safe-area-inset-bottom)
        box-sizing: border-box
        background-color: #fff
        display: flex
        .fixed_bottom_group
            display: flex
            align-items: center
            width: 100%;
            .help_btn
                flex: 1
                &:nth-child(2)
                    margin-left: 20rpx
        .help_btn
            box-sizing: border-box
            display: flex
            align-items: center
            justify-content: center
            height: 45px
            width: 100%
            font-size: 13px
            color: #000
            border-radius: 4px
            font-weight: bold
            .help_btn_text
                margin-left: 5px
            &.online_btn
                background-color: #fdcb2e
            &.refresh_btn
                background-color: #efefef
                &:active
                    background-color: #d9d8d8
        .reload_icon
            &.active
                animation rotation 2s linear infinite
    .order_empty_box
        background: none
        transform: translateY(50%)